<!--
 * @Author: adolphus adolphus520@163.com
 * @Date: 2022-12-10 00:29:18
 * @LastEditors: 姚杰鸿
 * @LastEditTime: 2024-11-11 17:04:37
 * @Description: file content
-->
<template>
  <el-row class="row-bg toolbar" justify="space-between">
    <el-col :span="1">
      <el-icon size="24" color="#337ecc" class="menu-icon" @click="collapse">
        <Fold v-if="!isCollapse" />
        <Expand v-else />
      </el-icon>
    </el-col>
    <el-col :span="8" align="right"> </el-col>
    <el-col :span="9"> </el-col>
    <el-col :span="6" align="right">
      <MdsAvatar style="cursor: pointer" @click="drawer = true" />
    </el-col>
    <el-drawer v-model="drawer" :with-header="false" size="450px">
      <SunMoonSwBtn />
      <el-row>
        <el-col :span="24" class="avatar">
          <MdsAvatar :size="200" />
        </el-col>
      </el-row>
      <el-row>Hi there!</el-row>
      <ThemeSelect />
      <el-button @click="signOut"> 注销 </el-button>
    </el-drawer>
  </el-row>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { start, close } from "@/lib/global";
import { SignOutApi } from "@/apis/home";

const mdsAsideProps = defineProps({
    isCollapse: {
      type: Boolean,
      default: false,
    },
    show: {
      type: Boolean,
      default: true,
    },
  }),
  emit = defineEmits(["collapse"]),
  collapse = (event: Event) => {
    emit("collapse", 1);
    event.stopPropagation();
  },
  drawer = ref(false),
  signOut = () => {
    start();

    SignOutApi()
      .then((res) => {
        if (201 == res.status) {
          drawer.value = false;
          setTimeout(() => {
            ElMessage.success("注销操作...");
          }, 30);
          setTimeout(() => {
            close();
            window.location.href = "/login.html";
          }, 500);
        } else {
          close();
          ElMessage.error("注销操作异常: " + res.status);
        }
      })
      .catch((err) => {
        console.log(err);
        close();
        ElMessage.error(err.response.data.msg);
      });
  };
</script>

<style lang="scss" scoped>
.toolbar {
  display: inline-flex;
  align-items: center;
  height: 100%;
  width: 100%;
}
.avatar {
  text-align: center;
}
.search-input {
  position: absolute;
  left: 40px;
  top: 16px;
  width: 350px;
}
.menu-icon {
  cursor: pointer;
  position: absolute;
  top: 20px;
}
</style>
